<template>
  <div class="nav-base">
    <el-dropdown trigger="click" class="panelprop">
      <span class="el-dropdown-link">
        <i
          class="el-icon-set-up"
          style="fontsize: 24px; verticalalign: middle; margintop: 2px"
          title="属性面板"
        ></i>
        <b v-if="isiconTitle" style="verticalalign: middle"> 属性面板</b>
      </span>

      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item icon="el-icon-plus" @click="leftEmit"
            >导航窗格</el-dropdown-item
          >
          <el-dropdown-item icon="el-icon-circle-plus" @click="rightEmit"
            >属性面板</el-dropdown-item
          >
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <i
      v-for="(item, index) in iconfonts"
      :key="index"
      :class="{
        iconfont: true,
        ['icon-' + item.icon]: true,
        checked: index == nowIndex,
      }"
      :title="item.title"
      @click="relationClick(index)"
    ></i>

    <el-select v-model="value" size="mini" style="width: 80px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>
    <el-select v-model="value2" size="mini" style="width: 80px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <el-select v-model="value3" size="mini" style="width: 80px">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      >
      </el-option>
    </el-select>

    <i
      v-for="(item, index) in iconfonts2"
      :key="index"
      :class="{
        iconfont: true,
        ['icon-' + item.icon]: true,
        checked: index == nowIndex2,
      }"
      :title="item.title"
      @click="relationClick2(index)"
    ></i>
  </div>
</template>

<script>
import { ref, watch } from "vue";
// import { mapGetters } from 'vuex'
export default {
  props: {
    isiconTitle: {
      type: Boolean,
    },
  },
  setup(props, ctx) {
    watch(
      () => props.isiconTitle,
      (current) => {
        console.log(current);
      },
      { immediate: true }
    );
    const options = ref([
      {
        value: "选项1",
        label: "宋体",
      },
      {
        value: "选项2",
        label: "楷体",
      },
    ]);

    const value = ref("宋体");
    const value2 = ref("4号");
    const value3 = ref("正文");
    const nowIndex = ref(null);
    const iconfonts = ref([
      { icon: "chaifenyemian", title: "分页" },
      { icon: "biaoge", title: "表格" },
      { icon: "geshishua", title: "格式刷" },
      { icon: "qingchugeshi", title: "清除格式" },
    ]);

    const iconfonts2 = ref([
      { icon: "zitifangda", title: "A+" },
      { icon: "zitisuoxiao", title: "A-" },
      { icon: "cuti", title: "粗体" },
      { icon: "xieti", title: "斜体" },
      { icon: "Underline", title: "下划线" },
      { icon: "zhonghuaxian", title: "中划线" },
      { icon: "zitiyanse", title: "字体颜色" },
      { icon: "tianchong", title: "填充颜色" },
      { icon: "youduiqi", title: "向右对齐" },
      { icon: "zhongduiqi", title: "居中对齐" },
      { icon: "zuoduiqi", title: "向左对齐" },
      { icon: "liangduanduiqi", title: "均分对齐" },
      { icon: "hangjianju", title: "行间距" },
      { icon: "shouhangsuojin", title: "首行缩进" },
      { icon: "hangjianju", title: "行间距" },
      { icon: "icon--1", title: "均分缩进" },
      { icon: "icon--", title: "减少缩进" },
      { icon: "danxuanxuanzhong", title: "设为单选项" },
      { icon: "checkbox-checked", title: "设为多选项" },
      { icon: "biaoshi", title: "标识符号" },
      { icon: "icon-", title: "排序符号" },
      { icon: "zhuanhuan", title: "转换" },
      { icon: "sousuo", title: "搜索" },
      { icon: "shuxing", title: "属性" },
    ]);
    const nowIndex2 = ref(null);

    const relationClick = (index) => {
      nowIndex.value = index;
      nowIndex2.value = null;
    };

    const relationClick2 = (index) => {
      nowIndex2.value = index;
      nowIndex.value = null;
    };
    const leftEmit = () => {
      ctx.emit("showLeftMenu", true);
    };
    const rightEmit = () => {
      ctx.emit("showRightMenu", true);
    };
    return {
      options,
      value,
      value2,
      value3,
      nowIndex,
      relationClick,
      iconfonts,
      iconfonts2,
      nowIndex2,
      relationClick2,
      leftEmit,
      rightEmit,
    };
  },
};
</script>

<style lang="scss" scoped>
.panelprop > span {
  cursor: pointer;
  > i {
    font-size: 24px;
  }
  b {
    font-size: 16px;
  }
  &:hover {
    transition: 0.3s all;
    background: #eaecf0;
  }
}

@media screen and (min-width: 2048px) {
  .panelprop > span {
    > i {
      transform: translateY(5px);
    }
  }
}

.el-dropdown-link {
  font-size: 20px;
}
.iconfont {
  font-size: 24px;
  vertical-align: top middle;
  margin-left: 6px;
  padding: 4px;
  &:hover {
    transition: 0.3s all;
    background-color: #eaecf0;
  }
}
.el-select {
  margin-top: 2px;
}
.checked {
  color: #6092e7;
}
@import url("//at.alicdn.com/t/font_1012213_ixjun78nl1a.css");
</style>
